<template>
    <div>
        <div style="display: flex;justify-content: space-between">
            <div>
                <el-input
                    placeholder="请输入员工姓名或奖惩原因进行搜索..."
                    prefix-icon="el-icon-search"
                    v-model="keyword"
                    style="width: 350px;margin-right: 10px"
                    @keydown.enter.native="initEmps"
                    clearable
                    :disabled="loading">
                </el-input>
                <el-button icon="el-icon-search" type="primary" @click="initEmps" :disabled="loading">搜索</el-button>
            </div>

        </div>

        <div style="margin-top: 10px">
            <el-table
                :data="ecs"
                stripe
                border
                style="width: 100%"
                v-loading="loading"
                element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading">
                <el-table-column
                    type="selection"
                    width="40">
                </el-table-column>
                <el-table-column
                    prop="id"
                    label="ID"
                    width="50">
                </el-table-column>
                <el-table-column
                    label="员工姓名"
                    width="120">
                    <template slot-scope="scope">
                        <div>{{ scope.row.employee ? scope.row.employee.name : '无' }}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    label="工号"
                    width="120">
                    <template slot-scope="scope">
                        <div>{{ scope.row.employee ? scope.row.employee.workID : '无' }}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="ecdate"
                    label="奖惩日期"
                    width="120">
                </el-table-column>
                <el-table-column
                    prop="ecreason"
                    label="奖惩原因">
                </el-table-column>
                <el-table-column
                    prop="ecmoney"
                    label="奖惩金额"
                    width="120">
                </el-table-column>
                <el-table-column label="奖惩类型" align="center" width="120">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.ectype === 1" type="success">奖励</el-tag>
                        <el-tag v-else-if="scope.row.ectype === 2" type="danger">处罚</el-tag>
                        <el-tag v-else>未知</el-tag>
                    </template>
                </el-table-column>
              <el-table-column label="审核状态" align="center" width="100">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.status === '待审核'" type="warning">{{ scope.row.status }}</el-tag>
                  <el-tag v-else-if="scope.row.status === '审核通过'" type="success">{{ scope.row.status }}</el-tag>
                  <el-tag v-else-if="scope.row.status === '拒绝'" type="danger">{{ scope.row.status }}</el-tag>
                  <el-tag v-else type="info">{{ scope.row.status || '未知' }}</el-tag>
                </template>
              </el-table-column>
                <el-table-column
                    prop="remark"
                    show-overflow-tooltip
                    label="备注">
                </el-table-column>
              <el-table-column
                  label="操作"
                  align="center"
                  width="120">
                <template slot-scope="scope">
                  <el-button v-if="scope.row.status === '待审核'" type="primary" size="small" @click="handleAudit(scope.row)">审核</el-button>
                </template>
              </el-table-column>
            </el-table>

            <div style="display: flex;justify-content: flex-end;margin-top: 10px">
                <el-pagination
                    background
                    layout="sizes, prev, pager, next, jumper, ->, total"
                    :total="total"
                    :page-size="size"
                    :current-page.sync="page"
                    @current-change="initEmps"
                    @size-change="sizeChange">
                </el-pagination>
            </div>
        </div>

      <el-dialog :visible.sync="auditVisible" title="奖惩审核">
        <el-form :model="auditForm" :rules="auditRules" ref="auditForm" label-width="100px">
          <el-form-item  prop="auditStatus">
            <el-radio-group v-model="auditForm.auditStatus">
              <el-radio label="审核通过">审核通过</el-radio>
              <el-radio label="拒绝">拒绝</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <template #footer>
          <span>
            <el-button @click="auditVisible = false">取消</el-button>
            <el-button type="primary" @click="submitAudit">确定</el-button>
          </span>
        </template>
      </el-dialog>

    </div>
</template>

<script>
    export default {
        name: "PerEc",
        data() {
            return {
                loading: false,
                ecs: [],
                total: 0,
                page: 1,
                size: 10,
                keyword: '',
                auditVisible: false,
                currentId: '',
                auditForm: {
                    auditStatus: ''
                },
                auditRules: {
                    auditStatus: [
                        { required: true, message: '请选择审核结果', trigger: 'change' }
                    ]
                }
            }
        },
        mounted() {
            this.initEmps();
        },
        methods: {
            // 初始化奖惩记录
            initEmps() {
                this.loading = true;
                this.getRequest("/personnel/ec/?page=" + this.page + "&size=" + this.size + "&keyword=" + this.keyword).then(resp => {
                    this.loading = false;
                    if (resp) {
                        this.ecs = resp.data;
                        this.total = resp.total;
                    }
                });
            },
            // 页面大小改变
            sizeChange(size) {
                this.size = size;
                this.page = 1;
                this.initEmps();
            },
            // 更新奖惩
            doUpdateEc() {
                this.$refs.updateEcForm.validate(valid => {
                    if (valid) {
                        this.putRequest("/personnel/ec/", this.updateEc).then(resp => {
                            if (resp) {
                                this.updateDialogVisible = false;
                                this.initEmps();
                                this.$message.success("更新成功!");
                            }
                        });
                    }
                });
            },

            // 删除奖惩
            deleteEc(data) {
                this.$confirm('此操作将删除该奖惩记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteRequest("/personnel/ec/" + data.id).then(resp => {
                        if (resp) {
                            this.initEmps();
                            this.$message.success("删除成功!");
                        }
                    });
                }).catch(() => {
                    this.$message.info("已取消删除");
                });
            },

            // 处理审核
            handleAudit(row) {
                this.auditForm.auditStatus = '';
                this.auditVisible = true;
                this.currentId = row.id;
                this.$nextTick(() => {
                    this.$refs.auditForm.clearValidate();
                });
            },

            submitAudit() {
                this.$refs.auditForm.validate(valid => {
                    if (valid) {
                        this.requestData = {
                            id: this.currentId,
                            status: this.auditForm.auditStatus
                        };
                        this.putRequest('/personnel/ec/', this.requestData).then(resp => {
                            if (resp) {
                                this.auditVisible = false;
                                this.initEmps();
                                this.auditForm.auditStatus = '';
                                this.$message.success('审核操作成功！');
                            }
                        });
                    }
                });
            },
        }
    }
</script>

<style scoped>

</style>
